:root {
  /* Colors */
  --theme-primary: hsl(0, 0%, 5%);
  --theme-on-primary: hsl(0, 0%, 90%);

  --theme-primary-hover: hsl(0, 0%, 10%);

  --theme-primary-light: hsl(0, 0%, 80%);

  --theme-background: hsl(0, 0%, 98%);
  --theme-on-background: hsl(0, 0%, 5%);

  --theme-surface-1: hsl(0, 0%, 93%);
  --theme-on-surface-1: hsl(0, 0%, 10%);

  --theme-footer-background: hsl(0, 0%, 3%);
  --theme-on-footer-background: hsl(0, 0%, 90%);

  /* Typography */
 /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

  --step--2: clamp(0.78rem, calc(0.71rem + 0.35vw), 0.96rem);
  --step--1: clamp(0.94rem, calc(0.84rem + 0.51vw), 1.20rem);
  --step-0: clamp(1.13rem, calc(0.98rem + 0.73vw), 1.50rem);
  --step-1: clamp(1.35rem, calc(1.15rem + 1.02vw), 1.88rem);
  --step-2: clamp(1.62rem, calc(1.34rem + 1.41vw), 2.34rem);
  --step-3: clamp(1.94rem, calc(1.56rem + 1.92vw), 2.93rem);
  --step-4: clamp(2.33rem, calc(1.81rem + 2.59vw), 3.66rem);
  --step-5: clamp(2.80rem, calc(2.11rem + 3.47vw), 4.58rem);

  --font-family-heading: '', sans-serif;
  --font-family-body: 'Open Sans', sans-serif;

  --body-max-width: 1920px;

  /* Container */
  --container-padding: 0 1rem;
  --container-max-width: 860px;

  --header-height: 76px;

  /* Transitions */
  --ease-out-soft: cubic-bezier(0.28, 0, 0.49, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors */
    --theme-primary: hsl(0, 0%, 90%);
    --theme-on-primary: hsl(0, 0%, 5%);

    --theme-primary-hover: hsl(0, 0%, 80%);

    --theme-primary-light: hsl(0, 0%, 20%);

    --theme-on-background: hsl(0, 0%, 92%);
    --theme-background: hsl(0, 0%, 8%);

    --theme-surface-1: hsl(0, 0%, 12%);
    --theme-on-surface-1: hsl(0, 0%, 96%);
  }
}

[color-scheme='light'] {
  color-scheme: light;
  /* Colors */
  --theme-primary: hsl(0, 0%, 5%);
  --theme-on-primary: hsl(0, 0%, 90%);

  --theme-primary-hover: hsl(0, 0%, 10%);

  --theme-primary-light: hsl(0, 0%, 80%);

  --theme-background: hsl(0, 0%, 98%);
  --theme-on-background: hsl(0, 0%, 5%);

  --theme-surface-1: hsl(0, 0%, 93%);
  --theme-on-surface-1: hsl(0, 0%, 10%);
}

[color-scheme='dark'] {
  color-scheme: dark;
  /* Colors */
  --theme-primary: hsl(0, 0%, 90%);
  --theme-on-primary: hsl(0, 0%, 5%);

  --theme-primary-hover: hsl(0, 0%, 80%);

  --theme-primary-light: hsl(0, 0%, 20%);

  --theme-on-background: hsl(0, 0%, 92%);
  --theme-background: hsl(0, 0%, 8%);

  --theme-surface-1: hsl(0, 0%, 12%);
  --theme-on-surface-1: hsl(0, 0%, 96%);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  background-color: var(--theme-background);
  color: var(--theme-on-background);
  font-size: var(--step-0);
  font-family: var(--font-family-body);
  font-weight: 400;
  line-height: 1.5;
  max-width: var(--body-max-width);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.content__main {
  padding-top: calc(var(--nav-height) + 2rem);
  padding-bottom: 4rem;
}

/* Typography */

h1 {
  font-size: var(--step-4);
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: var(--step-3);
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-size: var(--step-2);
  font-family: var(--font-family-heading);
  font-weight: 500;
  line-height: 1.2;
}

h4 {
  font-size: var(--step-1);
  font-family: var(--font-family-heading);
}

h1,
h2,
h3 {
  max-width: 30ch;
}

p,
li {
  max-width: 70ch;
}

pre {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem 0.75rem;
  border-radius: 0.25rem;
}

pre copy-code-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Gloal fade in animation */

@media (prefers-reduced-motion: no-preference) {
  .fade-in[data-state=visible] {
      transition: transform 700ms cubic-bezier(0.42, 0, 0.32, 1.17), opacity 1000ms cubic-bezier(0.42, 0, 0.32, 1.17) 200ms;
  }

  .fade-in[data-state=hidden] {
      transform: translateY(2ex);
      opacity: 0;
  }
}